import React, { useState, useEffect } from 'react'
import logo from '../../../../static/img/logo.png';
import { Button, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import './index.css'
import ShippMag from '../../../Shopping/OrderMag/ShippMag';
import axios from 'axios';
import { aUrl } from '../../../../static/axios_url';
export default function OrderMag() {
    let navigate = useNavigate();
    let location = useLocation()//接收地址栏search传参
    //商品信息
    const [mag, setMag] = useState({})
    useEffect(() => {
        axios.post(aUrl + '/shopcar/JfBill', {
            id: location.search.substr(1)
        }).then(res => {
            setMag(res.data)
        })
    }, [])
    console.log(mag);
    function gohome() {
        navigate('/jfstore')
    }
    let [num, setNum] = useState(1)
    //添加商品数量
    function shopAdd() {
       num++
       setNum(num)
    }
    //减少商品数量
    function shopSub() {
        if (num > 0) {
            num--
        }
        setNum(num)
    }
    //确认兑换按钮
    function gojfyes(){
        let jfmag ={}
        jfmag.g_id=location.search.substr(1)*1
        jfmag.g_num=num
        
        axios.post(aUrl+'/shopcar/addjfBill',{
          addjfBill:jfmag
        }).then(res=>{
            console.log(res);
            if(res.data.code===1){
                message.success('兑换成功')
                navigate('/jfyes')
            }
        })
        
    }
    return (
        <div style={{ width: 1278, marginLeft: 320 }}>
            <div style={{ margin: '40px 0 40px 0' }}>
                <img onClick={gohome} src={logo} alt="" /><span
                    style={{
                        display: 'inline-block',
                        width: 180,
                        height: 40,
                        marginLeft: 60,
                        marginTop: 25,
                        textAlign: 'right',
                        borderLeft: '1px solid #bdbdbd',
                        font: '18px/40px ""',
                        color: '#bdbdbd'
                    }}>确认兑换信息</span>
            </div>
            {/* 收货人信息 */}
            <>
                <ShippMag go='jfshop' />
                {/* 通过go参数 表示时是jfshop组件在添加地址 */}
            </>

            {/* 商品信息 */}
            <h3 className='om-h3'>商品信息</h3>
            <div>
                <div className='sm-main-mag'>
                    <p><em>商品名称</em><span>规格</span><span>数量</span><span>金额</span></p>
                    <ul>
                        <li>
                            <i><img src="" alt="" /></i>
                            <em>{mag?.title}</em>
                            <span>{mag?.gui_ge}</span>
                            <span className='sm-count'>
                                <button onClick={shopSub}>-</button>
                                <u>{num}</u>
                                <button onClick={shopAdd}>+</button>
                            </span>
                            <span><i className='sm-ul-li-i'>{mag?.jf*num}</i>积分</span>
                        </li>
                    </ul>
                </div>
                <div>
                    {/* 添加订单备注 */}
                    <div className='om-tjdd'>
                        <h3 className='om-h3'>添加订单备注</h3>
                        <input placeholder='限45个字，请填写有关商品、支付、发票等信息' type="text" />
                    </div>
                </div>
            </div>
            {/* 付款 */}
            <div om-fk>
                <ul>
                    <li className='om-fk-li1'>实付积分: <span>{mag?.jf*num}</span></li>
                    <li><Button onClick={gojfyes} style={{ width: 150, height: 50, margin: '40px 0 40px 1129px', backgroundColor: '#F08200', border: 'none', borderRadius: 5, font: '18px/46px ""', color: '#FFFFFF', cursor: 'pointer' }} type="primary">
                        确认兑换
                    </Button></li>
                </ul>
            </div>
        </div>
    )

}

